<template>
  <el-dialog v-model="show" title="上架带货商品" width="40%">
    <div class="container">
      <div class="left_wrapper">
        <el-card shadow="always" :body-style="{ padding: '20px' }">
          <template #header>
            <div class="search">
              <el-input
                placeholder="请输入专栏名"
                size="default"
                clearable
                style="width: 125px"
                v-model="params.spName"
              ></el-input>
              <el-input
                placeholder="输入课程标题"
                size="default"
                clearable
                v-model="params.title"
                style="width: 125px; margin-left: 5px"
              ></el-input>
              <el-button type="primary" size="default" @click="initData">查询</el-button>
            </div>
          </template>
          <!-- card body -->
          <div class="list">
            <div class="item" v-for="item in list" :key="item.data.goodsId">
              <div class="cover">
                <img
                  :src="item.data.coverUrl"
                  :onerror="errorImage"
                  alt=""
                  srcset=""
                />
              </div>
              <div class="info">
                <div class="title">{{ item.data.title }}</div>
                <div class="footer">
                  <el-button
                    type="success"
                    round
                    size="small"
                    @click="handleAdd(item)"
                    >添加</el-button
                  >
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </div>

      <div class="right_wrapper">
        <el-card shadow="always" :body-style="{ padding: '20px' }">
          <template #header>
            <div class="search">已经选清单</div>
          </template>
          <!-- card body -->
          <div class="list">
            <div
              class="item"
              v-for="(item, index) in addList"
              :key="item.data.goodsId"
            >
              <div class="cover">
                <img
                  :src="item.data.coverUrl"
                  :onerror="errorImage"
                  alt=""
                  srcset=""
                />
              </div>
              <div class="info">
                <div class="title">{{ item.data.title }}</div>
                <div class="footer">
                  <el-button
                    type="primary"
                    round
                    size="small"
                    @click="handleSort(item)"
                    v-if="index == 0"
                    >置顶</el-button
                  >
                  <el-button
                    type="danger"
                    round
                    size="small"
                    @click="handleDel(item)"
                    >删除</el-button
                  >
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </div>
    </div>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="show = false">关闭</el-button>
        <el-button type="primary" @click="show = false">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ElMessage } from "element-plus";
import { reactive, ref } from "vue-demi";
import {
  addLiveGoods,
  getLiveGoodsList,
  getSelfAddGoods,
  liveGoodSort,
  removeLiveGoods,
} from "../../api/teacher";
import storage from "../../utils/storage";
import defaultImg from "../../assets/img/default.png";

const show = ref(false);

const user = storage.getStorage("teacher_user");
const params = reactive({
  userId: user.userId,
  title: "test",
  spName: "",
  isMy: 0,
  type: 2, //1文章，2课程，3小视频，3暂不用，isMy为0时有用
  pageIndex: 1,
  pageSize: 100,
  liveId: user.liveId || "LV0137709049218207744",
});
const list = ref([]);
const initData = async () => {
  const res = await getLiveGoodsList(params);
  if (res && res.length) {
    list.value = res;
  }
};

// 查询已经添加得
const addList = ref([]);
const initAdded = async () => {
  const res = await getSelfAddGoods({
    userId: user.userId,
    liveId: user.liveId || "LV0137709049218207744",
  });
  if (res && res.length) {
    addList.value = res;
  }
};

// 添加带货商品
const handleAdd = async (item) => {
  const res = await addLiveGoods({
    userId: user.userId,
    liveId: user.liveId || "LV0137709049218207744",
    goodsIds: item.data.goodsId,
    sort: 1,
  });
  if (typeof res == "object") {
    ElMessage({
      type: "success",
      message: "添加商品成功,已置顶商品",
    });
  }
  initAdded();
};

// 删除带货商品
const handleDel = async (item) => {
  const res = await removeLiveGoods({
    userId: user.userId,
    ids: item.data.goodsId,
  });
  if (typeof res == "object") {
    ElMessage({
      type: "success",
      message: "删除商品成功！",
    });
    initAdded();
  }
};

// 商品排序
const handleSort = async (item) => {
  const res = await liveGoodSort({
    userId: user.userId,
    liveId: user.liveId || "LV0137709049218207744",
    goodsId: item.data.goodsId,
  });
  if (typeof res == "object") {
    ElMessage({
      type: "success",
      message: "置顶商品成功！",
    });
    initAdded();
  }
};

const errorImage = (event) => {
  let img = event.srcElement;
  img.src = defaultImg; //替换的图片
  img.onerror = null; //控制不要一直触发错误
};
defineExpose({
  show,
  initData,
  initAdded,
});
</script>


<style scoped lang='scss'>
.container {
  display: flex;
  flex-direction: row;
  height: 500px;
  overflow: hidden;
  .left_wrapper {
    width: 50%;
    padding: 0 10px;
    .search {
      display: flex;
      button {
        margin: 0 5px;
      }
    }
  }
  .right_wrapper {
    width: 50%;
    .search {
      height: 32px;
      display: flex;
      align-items: center;
      font-size: 18px;
    }
  }
  .list {
    height: 380px;
    overflow-y: auto;
    .item {
      display: flex;
      flex-direction: row;
      height: 80px;
      margin-bottom: 15px;
      overflow: hidden;
      .cover {
        width: 40%;
        display: flex;
        align-items: center;
        img {
          width: 120px;
          height: 65px;
          border-radius: 5px;
        }
      }
      .info {
        padding: 10px;
        overflow: hidden;
        width: 60%;
        position: relative;
        .title {
          width: 100%;
          text-align: left;
          font-size: 16px;
          color: #383838;
          line-height: 20px;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
        }
        .footer {
          display: flex;
          flex-direction: row;
          justify-content: flex-end;
          margin-top: 20px;
        }
      }
    }
  }
}
</style>